<template>
  <transition name="fade">
    <div class="remote-address-list" v-show="handleVisible">
      <scroll class="remote_city_list" ref="fuzzyCity"
              :listenScroll="true"
              :probeType="3"
              :data="data">
        <div class="remote_list_group">
          <address-list v-for="(item, index) in data"
                        :addressData="item"
                        :address="item.name"
                        :addressDetails="item.address"
                        :key="'group-place' + index"
                        @selected="onSelectItem"/>
        </div>
      </scroll>
      <div class="remote_list_none" v-if="data.length < 1">请输入要查询的地址...</div>
    </div>
  </transition>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import addressList from './address-list'
import { car } from '../../../data'
export default {
  components: { addressList },
  data () {
    return {
      data: []
    }
  },
  computed: {
    ...mapState([
      'userCarState'
    ]),
    ...mapGetters([
      'handleSearchAddressText'
    ]),
    handleVisible () {
      if (this.userCarState.searchAddress.isOpenRemoteAddress) {
        return true
      }
      return false
    },
    handleCurrentCityName () {
      let type = this.$route.params.address;
      let cityData = this.userCarState.callCarParams[type];
      if (type === 'endAddress' && cityData.cityName === '') {
        cityData = this.userCarState.callCarParams['startAddress'];
      }
      return cityData
    }
  },
  methods: {
    ...mapMutations([
      'SET_SHOW_TARGET_ADDRESS',
      'SET_USER_CAR_START_ADDRESS',
      'SET_USER_CAR_END_ADDRESS',
      'SET_COMMON_ADDRESS_HOME',
      'SET_COMMON_ADDRESS_COMPANY',
      'SET_COMMON_ADDRESS_HOME_STATE',
      'SET_COMMON_ADDRESS_COMPANY_STATE',
      'SET_GEOLOCALTION_STATE'
    ]),
    getInputTips (content) {
      if (content === '') {
        this.SET_SHOW_TARGET_ADDRESS('isOpenHistoryAddress');
        return
      };
      car.getInputTips({
        cityName: this.handleCurrentCityName.cityName,
        keyword: content
      }).then((list) => {
        this.data = list.data.data
      })
    },
    // 点击城市列表返回选中的城市
    onSelectItem (item) {
      let type = this.$route.params.address;
      let selectAddress = {
        address: item.name,
        addressDetail: item.addressDetail,
        longitude: item.location.split(',')[0],
        latitude: item.location.split(',')[1]
      };
      if (this.userCarState.searchAddress.isEditCommonHome) {
        this.SET_COMMON_ADDRESS_HOME(Object.assign(this.userCarState.callCarParams.startAddress, selectAddress));
        this.SET_COMMON_ADDRESS_HOME_STATE(false);
        this.SET_SHOW_TARGET_ADDRESS('isOpenHistoryAddress');
      } else if (this.userCarState.searchAddress.isEditCommonCompany) {
        this.SET_COMMON_ADDRESS_COMPANY(Object.assign(this.userCarState.callCarParams.endAddress, selectAddress));
        this.SET_COMMON_ADDRESS_COMPANY_STATE(false);
        this.SET_SHOW_TARGET_ADDRESS('isOpenHistoryAddress');
      } else if (type === 'startAddress') {
        this.SET_USER_CAR_START_ADDRESS(Object.assign(this.userCarState.callCarParams.startAddress, selectAddress));
        this.setLocalHistoryRecord(Object.assign(this.userCarState.callCarParams.startAddress, selectAddress));
        this.SET_GEOLOCALTION_STATE('SUCCESS');
        this.$router.push('/carIndex');
      } else if (type === 'endAddress') {
        this.SET_USER_CAR_END_ADDRESS(Object.assign(this.userCarState.callCarParams.endAddress, selectAddress));
        this.setLocalHistoryRecord(Object.assign(this.userCarState.callCarParams.endAddress, selectAddress));
        this.SET_GEOLOCALTION_STATE('SUCCESS');
        this.$router.push('/carIndex');
      }
    },
    setLocalHistoryRecord (obj) {
      if (!store.has('SEARCH_HISTORY_RECORD')) {
        store.set('SEARCH_HISTORY_RECORD', [])
      }
      let localData = store.get('SEARCH_HISTORY_RECORD');
      if (!localData.some(item => item.latitude === obj.latitude && item.longitude && item.longitude)) {
        localData.unshift(obj);
        store.set('SEARCH_HISTORY_RECORD', localData);
      }
    }
  },
  watch: {
    handleSearchAddressText () {
      this.getInputTips(this.handleSearchAddressText)
    }
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .remote-address-list
    width 100%
    position absolute
    top 5 * .61rem
    bottom 0
    background $sl_theme_bg
    .remote_city_list
      position: absolute
      left 0
      right 0
      top 0
      bottom 0
      overflow: hidden
      background: $sl_theme_bg
  .remote_list_none
    position fixed
    left 50%
    top: 40%
    transform translate(-50%, -50%)
    padding 1 * .61rem
    font-size $sl_font_size_small
    color $sl_font_color_desc
  .fade-enter-active, .fade-leave-active
    transition opacity .5s
  .fade-enter, .fade-leave-to
    opacity: 0
</style>
